<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <style>
    #cart{
      width: 600px;
      margin: 40px auto;
    }
  </style>
</head>
<body>
  <div id="app">
    商品名：
    <input type="text">
    商品价格
    <input type="number">
    商品购买数量
    <input type="number">
    <button>增加</button>
    <table id="cart" class="table table-bordered"  align="center">
      <tr>
        <th>商品名</th>
        <th>商品价格</th>
        <th>商品购买数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr 
        v-for="(item, index) in items"
        :key="item.id"
      >
        <td>
          <input @change="singleItemSelected" type="checkbox" v-model="item.selected">
          <span>{{item.name}}</span>
        </td>
        <td>
          {{item.price}}
        </td>
        <td>
          <button class="btn btn-xs" @click="addNum(index)">+</button>
          <span>{{item.num}}</span>
          <button class="btn btn-xs" @click="reduceNum(index)">-</button>
        </td>
        <td>
          {{ (item.price*item.num).toFixed(2) }}
        </td>
        <td>
          <button class="btn btn-danger btn-sm" @click="delItem(index)">删除</button>
        </td>
      </tr>
      <tr>
        <td>合计:</td>
        <td colspan="4">
          总价格：{{total}}
          <span>
            全选：
              <input type="checkbox" @change="allSeclectedChange" v-model="allSeclected">
          </span>
        </td>
      </tr>
    </table>
  
  </div>
  <script src="./vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    const app = createApp({
      data(){
        return {
          item: {
            name: '',
            num: 0,
            price: 0,
            selected: true
          },
          items: [
            {
              id: 1,
              name: '商品1',
              price: 18.8,
              num: 1,
              selected: true
            },
            {
              id: 2,
              name: '商品2',
              price: 28.8,
              num: 1,
              selected: true
            },
            {
              id: 3,
              name: '商品3',
              price: 38.8,
              num: 1,
              selected: true
            },
            {
              id: 4,
              name: '商品4',
              price: 188.8,
              num: 1,
              selected: true
            },
            {
              id: 5,
              name: '商品5',
              price: 299,
              num: 1,
              selected: true
            }
          ],
          total: 0,
          allSeclected: true
        }
      },
      methods: {
        allSeclectedChange(){
          // 改变全选按钮状态
          this.items.forEach(item => {
            item.selected = this.allSeclected;
          })
          this.calcTotal();
        },
        singleItemSelected(){
          // 单个商品选中状态发生改变
          this.calcAllSeclected();
          this.calcTotal();
        },
        // 删除商品
        delItem(index){
          if(confirm('您确认删除吗?')){
            this.items.splice(index, 1);
            this.calcAllSeclected();
            this.calcTotal();
            // 判断items length 
          }
        },
        // 减少购买数量
        reduceNum(index){
          this.items[index].num--;
          if(this.items[index].num<1){
            this.items[index].num = 1;
          }
          // 重新计算总价格
          this.calcTotal();
        },
        // 增加商品购买数量
        addNum(index) {
          this.items[index].num++;
          // 重新计算总价格
         
          this.calcTotal();
        },
        // 计算总价格
        calcTotal(){
          /* 
            所有已经选中的商品的 数量乘以单价 总合
          */
          // 去除未选中商品
          this.total = 0;
          const selectedItems = this.items.filter(item => item.selected);
          selectedItems.forEach(item => {
            this.total += item.num * item.price;
          })
          // 保留小数点
          this.total = parseFloat(this.total.toFixed(2));
        },
        // 计算全选状态
        calcAllSeclected(){
          /* 
            判断所有的商品选中状态是不是都为true  则全选为true
            否则 全选false
          */
          this.allSeclected = this.items.every(item => item.selected);
        }
      },
      created(){
        // 初始化计算总价格 全选
        this.calcTotal();
        this.calcAllSeclected();
      }
    })
    app.mount('#app')
    
  </script>
</body>
</html>